import React, { Component } from 'react';
import { Link, routerRedux } from 'dva/router';
import { connect } from 'dva';
import { ActionSheet, List, InputItem,NavBar, Checkbox, Icon, Toast, Flex, WingBlank,Button,Radio, Modal, Grid} from 'antd-mobile';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import Img from "../../components/Img/Img";
import { createForm } from 'rc-form';
import MyScroll from "../../components/MyScroll/MyScroll";
import logisticsSvg from "../../assets/img/logistics.svg";


import { div_hearder, h3_hearder, div_content, div_text, text_header, text_content, user, ziYing, one, two, finishC} from './ReturnDetail.less'



class ReturnDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            paymentEntities: [],
            value: "YE",
            YE: false,
            YEModal: false,
            YEpassword: "",
            isRecharge: true,
            show: true,


            change: false,
            curNu: '圆通',
            nuList: [ '圆通', '圆通2', '圆通3', '圆通4', '圆通5', '圆通6', '圆通7', '圆通8' ],
        };
        this.list = [{name: "asdfasdfasdfas", name: "", name: ""}];
        this.elInput = "";
    }

    componentWillMount(){
        console.log(this.props.match.params.id, "componentWillMount");
    }

    componentDidMount() {
        console.warn(routerRedux, this, 'routerRedux,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,');

        console.log(this, "componentDidMount");
        this.getDetail();
    }

    getDetail = () => {
        // 0 换货, 1 退货，2 退款
        if (this.props.match.params.id.split(",")[1] == 0) this.props.dispatch({type:"orderList/returnDetailEFF", obj: {id: this.props.match.params.id.split(",")[0]}});
        else if (this.props.match.params.id.split(",")[1] == 1) this.props.dispatch({type:"orderList/refundDetailEFF", obj: {id: this.props.match.params.id.split(",")[0]}});
        else this.props.dispatch({type:"orderList/refundDetailEFF", obj: {id: this.props.match.params.id.split(",")[0]}});
    }

    getDate = time => new Date(time)

    click = () => {

        var BUTTONS = [];

        BUTTONS.push(<div style={{backgroundColor: 'red', color: '#fff'}}>关闭</div>)

        ActionSheet.showActionSheetWithOptions({
            cancelButtonIndex: BUTTONS.length - 1,
            // destructiveButtonIndex: BUTTONS.length - 2,
            options: BUTTONS,
            title: title,
            // message: 'I am description, description, description',
            maskClosable: true,
            'data-seed': 'logId',
            wrapProps,
        },
        (index, a) => {
            if (index == -1) return false;
            if (index == (BUTTONS.length - 1)) return false;
            console.log(index, "点击的index");
            if (title == "店铺优惠") {
                console.warn(data, index, "数据");
                if (data[index].isEnabled) this.props.dispatch({ type:'order/updateOrderEFF', obj: {storeId: storeId, typeId: 1, ruleId: data[index].id} })
                else Toast.fail("您暂时不能选择此优惠");
            } else if (title == "优惠券") {
                console.warn(data, index, "数据");
                if (data[index].isEnabled) this.props.dispatch({ type:'order/updateOrderEFF', obj: {storeId: storeId, typeId: 2, ruleId: data[index].id} })
                else Toast.fail("您暂时不能选择此优惠");
            } else if (title == "付款方式") {
                this.props.dispatch({ type:'order/updateOrderEFF', obj: {storeId: storeId, typeId: 3, ruleId: data[index].id} })
            } else if (title == "配送方式") {
                this.props.dispatch({ type:'order/updateOrderEFF', obj: {storeId: storeId, typeId: 4, ruleId: data[index].id} })
            }
            this.setState({change: !this.state.change});
        });
    }

    nuSubmit = (str) => {
        var data = this.props.form.getFieldsValue();
        const curType = +this.props.match.params.id.split(",")[1];

        if (!data.invoiceNo) return Toast.fail('请填写物流单号')

        // 0  换货退货，  1退货换货
        return this.props.dispatch({type: 'orderList/returnSendEFF', obj: {type: curType ? 1 : 0, id: this.props.orderList.returnDetail.barterId, refundId: this.props.orderList.returnDetail.refundId, ...data}}).then(res => {
            console.warn(res, 'updateOrderEFF   接收的数据。。。。');
            if (res.code == 200) {
                this.getDetail();
            }
        });
        // this.props.dispatch({type: 'order/updateOrderEFF', obj: {type: 0, id: '换货Id', expressName: '物流名称', invoiceNo: '物流单号', refundId: '退货Id'}})
    }


    orderFinish = id => {
        Modal.alert('确认', '请您确认是否收到货物', [
            { text: '取消', onPress: () => console.log('cancel'), style: 'default' },
            { text: '确认', onPress: () => {
                this.props.dispatch({type: 'orderList/orderFinishEFF', obj: {type: 0, id}}).then(res => {
                    if (res.code == 200) {
                        Toast.success(res.msg, 1.5);
                        return this.getDetail();
                    }
                }) //'换货记录Id'
            }},
        ]);
    }



    render() {
        const {dispatch} = this.props;
        const d = this.props.orderList.returnDetail;
        const curType = +this.props.match.params.id.split(",")[1];
        const { getFieldProps } = this.props.form;
        console.log(d.barterMemberState == 10 || d.returnMemberState == 10)
        return (
            <Flex style={{height: "100%", width: "100%", backgroundColor: "#eaeaea"}} direction="column">
                {/* 0维修换货售后详情、2仅退款售后详情、1退货退款详情 */}
                <NavTopBar dispatch={dispatch} title={curType ? curType == 1 ? "退货退款详情" : "仅退款售后详情" : "维修换货售后详情"}/>
                <MyScroll>
                    <div className={ div_hearder }>
                        <p>{ +curType ? +curType == 1 ? "退货" : "仅退款" : "换货" }编号： { d.barterSn || d.refundSn }<span>{ d.sellerState == 30 || d.sellerState == 2 ? "同意" : d.sellerState == 40 || d.sellerState == 3 ? "不同意" : "待审核"}</span></p>
                        <div>
                            <p>商品名称： <span style={{width: '76%', verticalAlign: 'top'}}>{ d.goodsName }</span></p>
                            <p>{ curType ? curType == 1 ? "退货" : "仅退款" : "换货" }数量： { d.goodsNum }</p>
                            <p>申请时间： { d.appleTime || d.applyTime }</p>
                        </div>
                        <p>下单时间： { d.orderTime }</p>
                    </div>
                    <h3 className={ h3_hearder } style={{textAlign: "left"}}>售后类型：{ curType ? curType == 1 ? "退货" : "仅退款" : "换货" }</h3>

                    <div className={ div_content }>

                        {
                            d.barterMemberState == 20 ?
                            <div className={one}>
                                <p>{ "卖家已填写物流信息" }</p>
                                <p>{ d.sellerTime || "暂无" }</p>
                                <span><Icon type={ logisticsSvg.id }/></span>
                            </div> : ""
                        }

                        {
                            d.barterMemberState == 10 || d.returnMemberState == 10 ?
                            <InputItem
                                {...getFieldProps('invoiceNo')}
                                extra={<div className={ finishC } onClick={() => this.nuSubmit('物流信息。。。')}>确认提交</div>}
                                placeholder="物流单号"
                                ref={el => this.autoFocusInst = el}
                            >
                                <InputItem
                                    style={{margin: '0rem'}}
                                    {...getFieldProps('expressName', { initialValue: '圆通' })}
                                    placeholder="圆通"
                                    // extra={<div onClick={() => }><Icon type='down'/></div>}
                                />
                            </InputItem>:""
                        }

                        {
                            d.barterMemberState == 20 ?
                            <div className={two}>
                                <p>承运方： { d.sellerExpressName || "暂无" }<span>单号： { d.sellerInvoiceNo || "暂无" }</span></p>
                                {/* <p>{ "2017-7-27 9：49 北京分拨中心已发出" }</p> */}

                                <div>
                                    <p style={{opacity: 0}}>详情</p>
                                    <p onClick={() => this.orderFinish( d.barterId )}>确认收货</p>
                                    {/* <p>{ `剩余${ this.getDate(d.sellerReceiveTime).getDate() }天${ this.getDate(d.sellerReceiveTime).getHours() }小时`}</p> */}
                                </div>

                            </div> : ""
                        }


                        {
                            this.state.show ?
                            <div className={ div_text }>


                                {
                                    (d.barterLog || d.returnLog || []).map(e => {
                                        return (
                                            <div key={e.time} className={ +e.operator ? user : ziYing }>
                                                <p>{e.time}</p>

                                                <p className={ text_header }>{ e.message }</p>
                                                { +e.isShowExpress ? <p className={ text_content }>承运方：&#12288;{ e.expressName }</p> : "" }
                                                { +e.isShowExpress ? <p className={ text_content }>单号：&#12288;{ e.expressInvoice }</p> : "" }
                                                { +e.isShowShippingAddress ? <p className={ text_content }>姓名：&#12288;{ e.shippingAddress.name }</p> : "" }
                                                { +e.isShowShippingAddress ? <p className={ text_content }>联系方式：&#12288;{ e.shippingAddress.cellphone }</p> : "" }
                                                { +e.isShowShippingAddress ? <p className={ text_content }>收货地址：&#12288;{ e.shippingAddress.address }</p> : "" }
                                                <span></span>
                                            </div>

                                        )
                                    })
                                }
                            </div> : ''
                        }





                            {/* <div className={ ziYing }>
                                <p>2016-04-05 14:01:11</p>

                                <p className={ text_header }>卖家已同意并给出换货地址</p>
                                <p className={ text_content }>地址： {d.adress}</p>
                                <p className={ text_content }>联系人： {d.adress}&#12288;&#12288;手机号： {d.phone}</p>
                                <span></span>
                            </div> */}

                            {/*
                                <div className={ user }>
                                    <p>{d.buyerShipTime}</p>

                                    <p className={ text_header }>{ e.message }</p>
                                    {
                                        e.isShowExpress ?
                                        (<p className={ text_content }>承运方：&#12288;{e.expressName }</p>
                                        <p className={ text_content }>单号：&#12288;{e.isShowExpress }</p>) : ""
                                    }
                                    <span></span>
                                </div>

                                <div className={ ziYing }>
                                    <p>2016-04-05 14:01:11</p>

                                    <p className={ text_header }>卖家已填写物流单号</p>
                                    <p className={ text_content }>承运方：&#12288;{d.buyerExpressName }</p>
                                    <p className={ text_content }>单号：&#12288;{d.buyerInvoiceNo }</p>
                                    <span></span>
                                </div>
                            */}


                    </div>


                </MyScroll>
            </Flex>
        )

    }


}

export default connect(({ orderList }) => ({ orderList }))(createForm()(ReturnDetail));
